<!--
 * @author hemengxia
 人员管理---设置可管理的部门
-->
<template>
  <section class="manage-department-list">
    <el-dialog
      v-el-drag-dialog
      :visible.sync="visible"
      :close-on-click-modal="false"
      title="权限设置"
      center
      @close="handleCancel()"
    >
      <section class="join-main">
        <section class="btn-content">
          <el-button class="add-btn" type="primary" @click="handleSubmit">添加权限</el-button>
        </section>
        <section class="main-table">
          <el-table
            v-loading="listLoading"
            :data="list"
            style="width: 100%"
          >
            <el-table-column prop="nameAll" label="已有组织权限" show-overflow-tooltip />
            <el-table-column
              label="操作"
              fixed="right"
              align="center"
              width="80"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="handleDelete(scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="btn-pagion fix">
            <pagination
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.limit"
              @pagination="getList"
            />
          </div>
        </section>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      title="选择组织"
      :visible.sync="OrgTreedialog"
      width="480px"
      center
    >
      <org-tree ref="showOrgTree" @selectOrgTree="selectOrg" />
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="closeOrgDialog">取消</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="saveOrg">确定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import Pagination from '@/components/Pagination'
import elDragDialog from '@/directive/el-drag-dialog'
import { queryList, insert, delDepartment } from './api'
import OrgTree from '@/views/personmanage/components/mulOrgTree' // Secondary package based on el-pagination
export default {
  name: 'ManageDepartment',
  components: { Pagination, OrgTree },
  directives: { elDragDialog },
  props: {
    userId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: true,
      listLoading: false,
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      OrgTreedialog: false,
      temporaryOrg: []
    }
  },

  created() {
    this.getList()
  },
  methods: {
    closeOrgDialog() {
      this.OrgTreedialog = false
      this.temporaryOrg = []
    },
    // 勾选组织
    selectOrg(val) {
      this.temporaryOrg = val
    },
    /*
       * 确定组织
       * */
    saveOrg() {
      if (this.temporaryOrg.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择部门'
        })
        return
      }
      this.OrgTreedialog = false
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      const params = {
        deptIds: this.temporaryOrg.join(','),
        userId: this.userId
      }
      return new Promise((resolve, reject) => {
        insert(params).then(({ data }) => {
          loading.close()
          this.getList()
        }).catch(error => {
          reject(error)
          loading.close()
        })
      })
    },
    /**
			 * 删除管理员
			 * */
    handleDelete(item) {
      this.$confirm('删除该部门权限后,当前管理员无权查看该部门数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDepartment({ deptIds: item.id, userId: this.userId }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
          this.getList()
        })
      }).catch(() => {
      })
    },
    getList(obj) {
      this.listLoading = true
      const query = {
        userId: this.userId,
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit
      }
      return new Promise((resolve, reject) => {
        queryList(query).then(({ data }) => {
          this.listLoading = false
          this.list = data.data.rows
          this.total = data.data.total
        }).catch(() => {
          this.listLoading = false
        })
      })
    },

    handleSubmit() {
      this.OrgTreedialog = true
    },

    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="scss">
  .manage-department-list {
    width: 100%;
    height: 100%;

    .join-main {
      /*  min-height: calc(100vh - 140px);
        max-height: calc(100vh - 140px);
        overflow: hidden;
        position: relative;*/
      .btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        .add-btn{
          width: 60%;
          border-style: dashed;
          background-color: rgba(228,77,66,0.1);
          color: rgba(228,77,66,1);;
        }
      }

      .main-table {
        .no-data{
          text-align: center;
          margin: 10px;
        }
        h3{
          margin-bottom: 0;
          color: #333;
        }
        .el-tag{
          margin:10px 10px 10px 0;
        }
        &::-webkit-scrollbar {
          width: 8px; /*对垂直流动条有效*/
          height: 1px; /*对水平流动条有效*/
        }

        /** 滚动条轨道*/
        &::-webkit-scrollbar-track {
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
          background-color: white;
          border-radius: 3px;
        }

        /** 滚动条里面小方块*/
        &::-webkit-scrollbar-thumb {
          height: 32px;
          border-radius: 5px;
          box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
          background-color: #eaeaea;
        }

        &:hover {
          overflow: auto;
        }
      }

      .main-page {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
  }
</style>
